<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<title></title>
</head>


<body>
	<div id="app">
		<el-cascader
		    v-model="value"
		    :options="options"
		    @change="handleChange"></el-cascader>
	</div>
	<script>
		new Vue({
			el:'#app',
			data:{
				options:[{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        }],
				value:''
			},
			methods:{
				handleChange(val){
					this.Value=val;
				}
			},
			mounted() {
				axios.get('./cityData.P.json').then((response)=>{
					this.options=response.data;
					console.log(response.data)
				}).catch(function(err){
					console.log(err);
				})
			}
	
		})
	</script>
</body>
</html>
